<template>
  <div>
    <h1>学生管理</h1>

    <el-table :data="tableData" style="width: 100%" height="100%">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="Date" width="120">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column property="name" label="真实姓名" width="120"/>
      <el-table-column
          property="address"
          label="use show-overflow-tooltip"
          width="240"
          show-overflow-tooltip
      />
      <el-table-column property="address" label="address"/>
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick">
            Detail
          </el-button>
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="page" background layout="prev, pager, next,total"
                   :total="totalPage"
                   :page-size="pageSize"/>
  </div>
</template>

<script setup>
// import {ElTable} from 'element-plus'
import {ref} from 'vue'

const handleClick = () => {
  console.log('click')
}
const tableData = ref([
  {
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
  },
  {
    date: '2016-05-03',
    name: 'Helen Jacobi',
    address: '760 A Street, South Frankfield, Illinois',
  },
  {
    date: '2016-05-02',
    name: 'Brandon Deckert',
    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
  },
])
const totalPage = ref(tableData.value.length);
const pageSize = ref(3); // 假设每页显示10条数据
</script>

<style scoped>
.page {
  margin: 20px auto;
}
</style>